<template>
  <div class="body_bgi full p_10 relative">
    <!-- <div class="w_full h_60 relative">
      <bigscreen-header :headerName="contestName + '比赛第一阶段评分'" />
      <el-button 
        class="absolute bottom_0 right_20" 
        type="primary" 
        plain 
        v-if="sheepInfo.isFinished"
        @click="clickSort()">查看排名
      </el-button>
    </div> -->

    <div class="w_full m_0_auto h_full p_20 flex_row_between" v-if="haveCurrentSheep">
      <!-- 评委列表 -->
      <div class="w_50_p flex_row_start gap_10 flex_wrap">
        <div 
          class="w_31_p h_33_p text_center border_radius_10 border_1_s_B2B1B0 flex_column_between" 
          v-for="(item, index) in scoreList" :key="index"
          :class="{ 'bgc_9b042c': index == maxIndex, 'bgc_green': index == minIndex }"
        >
          <div class="w_full h_full-80 p_10 pt_20">
            <img class="h_full border_radius_10 fit_cover" v-if="item.avatar" :src="item.avatar" alt="">
            <img class="h_full border_radius_10 fit_cover" v-else src="../assets/image/user.png" alt="">
          </div>

          <div class="w_full h_80 lh_80 ph_10">
            <div class="w_full h_40 flex_row_center flex_center">
              <div 
                class="fs_2vw fw_bold main_text" 
                v-if="item.totalScore">{{ item.totalScore }}
              </div>
              <div class="fs_1vw color_fff ml_2 pt_10 font_zh text_center" v-if="item.totalScore">分</div>
              <div class="fs_1_5vw fw_bold main_text" v-else>正在评分...</div>
            </div>

            <div class="w_full h_35 lh_35 fs_24 text_center">
              <!-- <div class="fs_1vw color_fff font_zh">评委 {{ item.judgeId }}</div> -->
              <div class="fs_24 color_fff fw_bold">{{ item.judgeName }}</div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 当前羊 & 排名 -->
      <div class="w_50_p h_full-200">
        <!-- 当前羊 -->
        <div class="w_full flex_row_center">
          <div class="w_full h_200 bgc_161925 border_radius_10 border_1_s_B2B1B0 relative">
            <div class="w_full text_center fs_50 font_zh main_color absolute_center">
              {{ sheepInfo.sheepNumber }}号羊
            </div>
            <div class="fs_22 ls_3 main_color absolute left_center bottom_20">当前评分羊</div>  
          </div>
        </div>

        <!-- 排名 -->
        <div class="w_full h_full-70 color_fff fs_1_5vw">
          <div class="w_full h_80 lh_80 flex_row_start pv_5 color_fff font_zh fs_22 ls_2">
            <div class="w_60 h_30 text_left">名次</div>
            <div class="w_24_p h_30 text_center">编号</div>
            <div class="w_24_p h_30 text_center">得分</div>
            <!-- <div class="w_24_p h_30 text_center">第二阶段</div> -->
            <!-- <div class="flex_1 h_30 text_center">当前得分</div> -->
            <!-- <div class="w_24_p h_30 text_center">最终得分</div> -->
          </div>

          <div class="w_full h_full-30 overflow_y_auto scroll_box pv_10">
            <div 
              class="w_full h_60 lh_60 flex_row_start align_center mb_5 color_000 font_zh " 
              v-for="(item, index) in sheepSortList" :key="index"
            >
              <div 
                class="w_60 text_center color_fff font_zh mb_10" 
                :class="{'m_0_auto h_40 lh_40 main_bgc border_radius_5': item.isMy}"
              >
                {{ item.rank }}
              </div>

              <div 
                class="w_full-65 flex_row_start border_radius_10 fs_22 mb_10 ml_5 pl_10"
                :class="[item.isMy ? 'main_bgc': 'bgc_fff color_000']"
              >
                <div class="w_24_p text_center">{{item.sheepNumber}}号羊</div>
                <div class="w_24_p text_center">{{item.totalScore}}</div>
                <!-- <div class="w_24_p text_center">-</div>
                <div class="w_24_p text_center">-</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="absolute_center fs_40 main_text font_zh ls_5" v-if="!haveCurrentSheep">请等待羊登场</div>

    <!-- <div class="w_full text_center fs_22 font_zh color_c53a49 ls_5 absolute bottom_20 left_center">
      最终排名以赛事赛事全部完成后为准！
    </div> -->

    <bigscreen-footer />
  </div>
</template>

<script>
  import { getCurrentSheep, getSheepScoreDetail, getSheepFiveRank } from '@/api/index.js'
  import BigscreenHeader from '@/components/Header.vue'
  import BigscreenFooter from '@/components/Footer.vue'

  export default {
    name: 'SheepScore',
    components: { BigscreenHeader, BigscreenFooter },
    data() {
      return {
        roomId: null,
        contestId: null,
        contestName: '',

        sheepInfo: {},

        timer: null,

        maxIndex: null,
        minIndex: null,
        maxScore: null,
        minScore: null,

        scoreList: [],
        scoreFinished: false,
        haveCurrentSheep: false,

        sheepSortList: []
      }
    },
    async mounted() {
      let roomId = this.$route.params.roomId
      let contestId = this.$route.params.contestId
      let contestName = this.$route.params.contestName
      
      this.roomId = roomId
      this.contestId = contestId
      this.contestName = contestName

      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      } 

      // 获取 房间中的 当前 羊
      this.getCurrentSheep(roomId, 0)
      
      this.timer = setInterval(() => {
        // 获取 房间中的 当前 羊
        this.getCurrentSheep(roomId, 0)
      }, 3000)
    },
    methods: {
      // 获取 当前羊排名 (前5)
      async getSheepFiveRank(contestId, rfid) {
        let res = await getSheepFiveRank(contestId, rfid)
        // debugger
        try {
          if (res.code == 1000) {
            this.sheepSortList = res.data
          }
        } catch(err) {
          console.log('获取当前羊排名失败 : ', err);
        }
      },

      // 获取 房间中的 当前羊
      async getCurrentSheep(roomId, current_sheep_id) {
        let res = await getCurrentSheep(roomId)
        try {
          if (res.code == 1000) {
            if (res.data.id) {
              // this.scoreList = []

              this.maxIndex = null,
              this.minIndex = null,

              this.haveCurrentSheep = true
              this.sheepInfo.sheepNumber = res.data.sheepNumber
              this.sheepInfo.rfid = res.data.rfid
              this.scoreFinished = res.data.isFinished

              let scoreList = res.data.sheepScoreList

              if (res.data.isFinished) {
                let maxIndex = 0;
                let minIndex = 0;
                let maxScore = 0;
                let minScore = 0;


                let totalScoreList = res.data.sheepScoreList;
                for(let i = 0; i < totalScoreList.length; i ++) {
                  let tmpItem = totalScoreList[i];
                  if (i == 0) {
                    maxIndex = i;
                    minIndex = i;
                    maxScore = tmpItem['totalScore'];
                    minScore = tmpItem['totalScore'];
                  } else {
                    if (maxScore < tmpItem['totalScore']) {
                      maxIndex = i;
                      maxScore = tmpItem['totalScore'];
                    }
                    if (minScore > tmpItem['totalScore']) {
                      minIndex = i;
                      minScore = tmpItem['totalScore'];
                    }
                  }
                }

                if (maxIndex == minIndex) {
                  maxIndex = 0
                  minIndex = 1
                }

                this.maxIndex = maxIndex
                this.minIndex = minIndex
                this.maxScore = maxScore
                this.minScore = minScore

                // let totalScoreList = res.data.sheepScoreList.sort((a, b)=>{
                //   return a.totalScore - b.totalScore
                // })

                // this.maxScore = totalScoreList[0]
                // this.minScore = totalScoreList[totalScoreList.length - 1]
              } 

              this.scoreList = scoreList

              // 获取 羊 评分详情
              await this.getSheepScoreDetail(this.contestId, res.data.rfid)

              // 获取 当前羊 排名 （前 5）
              await this.getSheepFiveRank(this.contestId, res.data.rfid)
            }
          }
        } catch(err) {
          console.log('获取房间中的当前羊失败 : ', err);
        }
      },

      // 获取 羊 评分详情
      async getSheepScoreDetail(contestId, rfid) {
        let res = await getSheepScoreDetail(contestId, rfid)
        try {
          if (res.code == 1000 && res.message == 'success') {
            this.sheepInfo.totalScore = res.data.totalScore             
          }
        } catch(err) {
          console.log('获取羊的评分信息失败 : ', err);
        }
      },

      // 格式化 羊 图片,
      formatAnimalImg(str) {
        let list = str.split(',')

        return list
      },

      formatAnimalGender() {

      },

      formatScoreBgc(judgeNumber) {
        if (this.scoreFinished) {
          if (this.maxScore && judgeNumber == this.maxScore.judgeNumber) {
            return 'bgc_ffffff9b'
          }
          if (this.minScore && judgeNumber == this.minScore.judgeNumber) {
            return 'bgc_ffffff9b'
          }
        } else {
          return ''
        }
        
      },

      formatScoreText(judgeNumber) {

        if (judgeNumber == this.maxScore.judgeNumber) {
          return 'text_del'
        }
        if (judgeNumber == this.minScore.judgeNumber) {
          return 'text_del'
        }
      },

      formatLevel() {

      },

      clickSort() {
        if (this.scoreFinished) {
          this.goToPage(`/sheep-sort/${this.contestId}/${this.contestName}/${this.sheepInfo.rfid}`)
        } else {
          this.$message({
            message: '当前羊未评分完成！',
            type: 'warning'
          });
        }
      },

      goToPage(path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style>
  .el-carousel--horizontal { height: 100% !important; }
  .el-carousel__container { height: 100% !important; }

  .is-active { color: #409eff; }
  .el-tabs__item { color: #fff; font-size: 20px !important; }
</style>